<template>
  <div class="echarts-demo">
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
      <!-- 回到顶部 -->
      <sweet-backtop target=".infinite-list" :bottom="100">
        <div
          style="
            height: 100%;
            width: 100%;
            background-color: var(--swt-color-gray2);
            box-shadow: var(--swt-shadow1);
            text-align: center;
            line-height: 40px;
            color: var(--swt-color-gray7);
          "
        >
          UP
        </div>
      </sweet-backtop>
      <li v-for="comp in comps" :key="comp" class="infinite-list-item">
        <component :is="comp" />
      </li>
  </ul>
  </div>
</template>
<script>
import areaChart from './echarts-components/area-chart.vue';
import barChart from './echarts-components/bar-chart.vue';
import barlineChart from './echarts-components/barline-chart.vue';
import boxplotChart from './echarts-components/boxplot-chart.vue';
import sweetCharts from './echarts-components/sweet-echarts.vue';
import gaugeChart from './echarts-components/gauge-chart.vue';
import horBarChart from './echarts-components/hor-bar-chart.vue';
import lineChart from './echarts-components/line-chart.vue';
import pieChart from './echarts-components/pie-chart.vue';
import liquidfillChart from './echarts-components/liquidfill-chart.vue';
import radarChart from './echarts-components/radar-chart.vue';
import radialBarChart from './echarts-components/radial-bar-chart.vue';
export default {
  name: 'echartsDemo',
  data() {
    return {
      comps: [
        areaChart,
        barChart,
        barlineChart,
        boxplotChart,
        sweetCharts,
        gaugeChart,
        horBarChart,
        lineChart,
        pieChart,
        liquidfillChart,
        radarChart,
        radialBarChart,
      ],
      count: 0,
      load: () => {
        this.count += 2;
      }
    };
  },
}
</script>
<style lang="less" scoped>
.echarts-demo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.infinite-list {
  width: 100%;
  height: 800px;
  margin-top: 10px;
  .infinite-list-item {
    margin-bottom: 10px;
    width: 700px;
    height: 100%;
  }
}
</style>